<template>
    <!-- 日历热点图容器 -->
    <div id="calendar" class="overflow-x-auto w-full h-60">

    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { watch } from 'vue'
import { format, subMonths } from 'date-fns'

// 对外暴露属性
const props = defineProps({
    value:{
        type: Object,
        default: null
    }
})
// 当前时间
const currentDate = new Date()
// 半年前
const sixMonthsAgo = subMonths(currentDate, 6)

// 格式化开始结束日期
const startDate = format(sixMonthsAgo, 'yyyy-MM-dd')
const endDate = format(currentDate, 'yyyy-MM-dd')

// 日历热点数据
const myData = []
// 初始化
function initCalendar() {

    // 将传入的数据设置到 myDate 数组中
    let map = props.value
    for (let key in map) {
        myData.push([
            key,
            map[key]
        ]);
    }

    var chartDom = document.getElementById('calendar');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        visualMap: {
            show: false,
            min: 0,
            max: 10
        },
        calendar: {
            range: [startDate, endDate],
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: myData
        },
        gradientColor: [
            '#fff',
            '#40c463',
            '#30a14e',
            '#216e39',
        ]
    };

    option && myChart.setOption(option);
}

// 监视初始化
watch(() => props.value, () => initCalendar())

</script>